"use strict";
import * as React from 'react';
const { View, ScrollView } = require('react-native');
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const { Actions } = require("react-native-router-flux");
const { createForm } = require('rc-form');
const { List, InputItem, DatePicker } = require('antd-mobile');
function formatDate(date) {
    const pad = n => n < 10 ? `0${n}` : n;
    const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
    const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
    return `${dateStr} ${timeStr}`;
}
import MyText from "../../component/MyText";
import NavBackButton from "../../component/BackButton";
import NavRightButton from "../../component/RightButton";
import Colors from "../../assets/styles/Colors";
import SearchBar from "../../component/SearchBar";
import Line from "../../component/Line";
import MyIcon from "../../component/icon";
import { commonProps, commonStyles } from "../../assets/styles/common";
import { toastValidateError } from "../../utils/tools";
class GuestRegisterPage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.textProps = {
            color: Colors.White,
            fontSize: 25,
            style: { marginBottom: 10 }
        };
        this.onChooseContact = () => {
            Actions.selectContact({
                onSelect: (e) => {
                    this.setState({
                        name: e.familyName + e.givenName + ' ' + e.company
                    });
                }
            });
        };
        this.onTextFieldChange = (filed, value) => {
            let obj = {};
            obj[filed] = value;
            this.setState(Object.assign({}, obj));
        };
        this.onRegister = () => {
            this.props.form.validateFields((errors, payload) => {
                if (errors) {
                    toastValidateError(errors);
                }
                else {
                    payload['email'] = this.props.auth.userInfo.email;
                    payload['area'] = this.props.auth.selectArea.name;
                    payload['_date'] = formatDate(payload['_date']);
                    this.props.dispatch({ type: 'place/registeGuest', payload });
                }
            });
        };
        this.state = {
            firstName: null,
            lastName: null,
            date: new Date(),
            dpValue: new Date(),
            visible: false,
            name: null
        };
    }
    render() {
        const { getFieldProps } = this.props.form;
        return (<View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar} leftButton={<NavBackButton />} rightButton={<NavRightButton onPress={this.onRegister}><MyText color={Colors.Active}>登记</MyText></NavRightButton>} title={{ title: '来宾登记', tintColor: '#fff' }}/>
                <View style={{ height: 50, backgroundColor: Colors.Primary, paddingVertical: 5 }}>
                    <SearchBar rightButtonWidth={0} leftIconName={'icon-ditu'} editable={false} onPress={Actions.search}/>
                </View>
                <View style={commonStyles.flex1}>
                    <ScrollView keyboardDismissMode={'on-drag'}>
                        <List>
                            <Line height={10} color={Colors.Background}/>

                            <List.Item extra={<MyText color={Colors.Active}>联系人</MyText>} onClick={this.onChooseContact}>
                                来宾信息
                            </List.Item>

                            <InputItem placeholder='姓名' clear {...getFieldProps('name', {
            initialValue: this.state.name,
            rules: [
                { required: true, message: '姓名未填写' },
            ]
        })}/>
                            <InputItem placeholder='来访目的' clear {...getFieldProps('desc', {
            rules: [
                { required: true, message: '来访目的未填写' },
            ]
        })}/>

                            <Line height={10} color={Colors.Background}/>

                            <List.Item>来宾到达</List.Item>


                            <List.Item extra={this.state.dpValue && formatDate(this.state.dpValue)} onClick={() => this.setState({ visible: true })}>
                                <MyIcon name={'icon-riqi'} color={'#000'} size={20}/>
                            </List.Item>

                            <DatePicker title="到达时间" visible={this.state.visible} minDate={new Date()} format={val => `${formatDate(val).split(' ')[1]}`} value={this.state.dpValue} onOk={date => this.setState({ dpValue: date, visible: false })} onDismiss={() => this.setState({ visible: false })} {...getFieldProps('_date', {
            initialValue: this.state.dpValue,
            rules: [
                { required: true, message: '来访时间' },
            ]
        })}/>
                        </List>
                    </ScrollView>
                </View>
            </View>);
    }
}
const Wrapper = createForm()(GuestRegisterPage);
export default connect(({ auth, place }) => ({ auth, place }))(Wrapper);
